<template>
  <div>
    <!-- 搜索框 -->
    <div class="findtop">
      <van-nav-bar title="" left-arrow @click-left="$router.back()">
        <template #title>
          <van-search placeholder="请输入小区或地址">
            <template #label>
              <div @click="$router.push('/city')">
                上海<van-icon name="arrow-down"></van-icon>
              </div>
            </template>
          </van-search>
        </template>
        <template #right>
          <van-icon name="location-o" size="30" />
        </template>
      </van-nav-bar>
    </div>

    <!-- 区域 -->
    <div>
      <van-dropdown-menu active-color="#21b97a">
        <van-dropdown-item title="区域" ref="item">
          <van-picker :columns="columns" />
          <van-button plain type="default">取消</van-button>
          <van-button type="primary" @click="onConfirm">确认</van-button>
        </van-dropdown-item>
        <!-- 方式 -->
        <van-dropdown-item title="方式" ref="item">
          <van-picker :columns="['不限', '整租', '合租']"></van-picker>
          <van-button plain type="default">取消</van-button>
          <van-button type="primary" @click="onConfirm">确认</van-button>
        </van-dropdown-item>
        <!-- 租金 -->
        <van-dropdown-item title="租金" ref="item">
          <van-picker
            :columns="['不限', '1000及以下', '1000-2000', '2000-3000']"
          ></van-picker>
          <van-button plain type="default">取消</van-button>
          <van-button type="primary" @click="onConfirm">确认</van-button>
        </van-dropdown-item>
        <!-- 筛选 -->
        <van-dropdown-item title="筛选" ref="item">
          <!-- <van-picker :columns="['不限', '整租', '合租']"></van-picker> -->
          <van-popup v-model="show" position="right" :style="{ height: '30%' }" />
          <!-- <van-button plain type="default">清除</van-button>
          <van-button type="primary" @click="onConfirm">确认</van-button> -->
        </van-dropdown-item>
      </van-dropdown-menu>
    </div>

    <div>
      <!-- 房屋内容 -->
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <findItem :list="list"></findItem>
      </van-list>
    </div>
  </div>
</template>

<script>
import { getHouse } from '@/api/house'
// import { getCity } from '@/api/city'
export default {
  name: 'find-page',
  components: {},
  data () {
    return {
      list: [],
      loading: false,
      finished: false,
      columns: [
        // 第一列
        {
          values: ['区域', '地铁'],
          defaultIndex: 2
        },
        // 第二列
        {
          values: ['不限', '杨浦', '徐汇', '普陀'],
          defaultIndex: 1
        }
      ],
      queryObj: {
        start: 1,
        end: 10
      },
      show: false
    }
  },
  methods: {
    onConfirm () {
      this.$refs.item.toggle()
    },
    async onLoad () {
      const data = await getHouse(this.queryObj)
      // console.log(data)
      this.list = data.body.list
      this.loading = false
      this.queryObj.start += 1
    },
    showPopup () {
      this.show = true
    }
  },
  async created () {
    const data = await getHouse()
    // console.log(data)
    this.list = data.body.list
  }
}
</script>

<style lang="less" scoped>
.findtop {
  width: 100%;
}
/deep/.van-search {
  padding: 0px;
}
/deep/.van-nav-bar__content {
  background-color: #21b97a;
}
/deep/.van-nav-bar .van-icon {
  color: #fff;
}
.find_price {
  font-size: 16px;
  font-weight: 600;
  color: #fa5741;
}
.find_month {
  font-size: 12px;
  color: #fa5741;
}
/deep/.van-button--default {
  width: 30%;
  font-size: 18px;
  color: #21b97a;
}
/deep/.van-button--primary {
  width: 70%;
  font-size: 18px;
  background-color: #21b97a;
  color: #fff;
}
</style>
